<div class="content">
    <!--第一模块 跳转图生图-->
    <div class="moduleone" routerLink="/pipi/img_img">
        <div class="moduleone-content">
            <img class="moduleone-img" src="https://file-cloud.fmode.cn/E4KpGvTEto/20230808/7sh1dm092437151.png" alt="模块一的图片">
        </div>
    </div>

    <!--第二模块 跳转左侧导航栏相应界面 -->
    <div class="moduletwo">
        <div class="moduletwo-title">
            <span>AI创作工具</span>
        </div>

        <div class="moduletwo-content" >
            <div class="moduletwo-box" *ngFor="let PagejumpItem of PagejumpItems; let i = index" (click)="i == 2 && showModal()" [routerLink]="PagejumpItem.routerLink">
                <div class="img-box">
                    <img class="pagejumpitem-img" [src]="PagejumpItem.image" alt="pagejumpitem-imgcheck">
                </div>
                <div class="pagejumpitem-title">{{PagejumpItem.title}}</div>
                <div class="pagejumpitem-explain">{{PagejumpItem.explain}}</div>
            </div>
        </div>

        <nz-modal 
    [(nzVisible)]="isVisible" 
    nzCentered   
    nzTitle=" " 
    (nzOnCancel)="handleCancel()"
    nzFooter=" "
    [nzStyle]="{'text-align': 'center'}"
    [nzWidth]='600'
  >
    <ng-container *nzModalContent>
      <div class="popup-title">即刻获取模型训练机会</div>
      <div class="popup-p">扫描二维码可加入官方用户群，将有机会体验 WHEE模型训练功能哦</div>
      <img class="erweima-img" src="./assets/images/2weima.png" alt="二维码">
    </ng-container>
  </nz-modal>
  
    </div>

    <!--第三模块 瀑布流式布局 图片瀑布流加载-->
    <div class="modulethree">
    <!--实现功能点1 图片的基本布局-->
    <!--实现功能点2 下拉加载更多图片-->
    <app-comp-masonry-layouts></app-comp-masonry-layouts>
    
    </div>
    
</div>
